<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/15 0015
  Time: 上午 11:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>

<!--刘艺广-->
<style>
    #scoreTab{
        margin-top: 60px;
        width: 1200px;
        text-align: center;
    }
    #scoreDiv{
        width: 1234px;
        margin: 0 auto;
    }
    #header{
        margin-top: 50px;
        margin-left: 30px;
    }
    td{
        padding-top: 20px;
    }
    select{
        height: 30px;
        width: 150px;
    }
    option{
        text-align: center;
        font-size: 20px;
        height: 30px;
        width: 150px;
    }
    body{
        background-color:#F2F2F2;
    }
</style>
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<body>

<div id="header">
    <input type="hidden" id="eId" value="${requestScope.eId}">
    <input type="hidden" id="zId" value="${requestScope.zId}">
    <input type="hidden" id="gid" value="${requestScope.gid}">
    ${requestScope.eName}&nbsp; <span style="color: green;font-size: 20px">本试卷总体平均分为：${requestScope.avgScore}</span>
    按班级查询成绩：
    <select name="classSelect" id="classSelect">
        <option value="0">--请选择班级--</option>
        <c:forEach items="${requestScope.classList}" var="cl" >
            <option value="${cl.cId}">${cl.cName}</option>
        </c:forEach>
    </select>
</div>
<hr/>
<div id="scoreDiv">
    <table id="scoreTab">
        <tr id="tabHeader">
            <th>年级</th>
            <th>班级</th>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
    </table>
</div>
<script>
    $(function () {
        //选择年级触发change事件
        $("#classSelect").change(function () {
            $.ajax({
                type: "post",
                url: "ScoreAnalysisServlet",
                data: {
                    gid:$("#gid").val(),
                    zId:$("#zId").val(),
                    eId:$("#eId").val(),
                    cId:$("#classSelect").val()
                },
                dataType: "JSON",
                success: function (data) {
                    console.log(data);
                    //每次选择班级先清空成绩列表
                    $("#scoreTab").find("tr[class='scoreTr']").remove();

                    if (data !=null) {
                        //显示成绩
                        $.each(data, function (index, obj) {
                            var $scoreTr = "<tr class='scoreTr'>" +
                                "<td>" + obj.student.gid + "</td>" +
                                "<td>" + obj.student.cl.cName + "</td>" +
                                "<td>" + obj.student.sId + "</td>" +
                                "<td>" + obj.student.sName + "</td>" +
                                "<td>" + obj.cj + "</td>" +
                                "</tr>";
                            $("#scoreTab").append($scoreTr);
                        })
                    }
                }
            });
        });

    });
</script>
</body>
</html>
